<template>
	<view class="">
		<!-- <view class="single">
			<uni-card :margin="'5px 10px 0px 10px'" @click="goodsDetail(item.id)" v-for="(item,index) in list"
				:index="index" :key="index">
				<image slot='cover' @click.stop="goodsDetail(item.id)"
					style="width: 100%;height: 10.25rem;margin-top: 10px;border-radius: 10px;"
					:src="item.picture"></image>
				<text class="uni-body">{{item.name}}</text>
				<view slot="actions" class="card-actions">
					<view class="card-actions-item">
						<text class="card-actions-item-text">￥{{item.price}}</text>
						<text class="card-actions-item-text1">已售{{item.sale}}件</text>
					</view>
					<view class="card-actions-item2" @click.stop="addCard(item.id)">
						<view class="card-actions-item-text2">
							<button style="border-radius: 20px;font-size: 14px;" type="warn">加入购物车</button>
						</view>
					</view>
				</view>
			</uni-card>
		</view> -->
		<view class="double">
			<view class="" style="width: 100%;display: flex;justify-content: center;">
				<view class="" style="display: flex; width: 95%;flex-flow: wrap;justify-content: space-between;">
					<view class="" style=" width: 49%;margin-top: 10px" v-for="(item,index) in list" :index="index"
						:key="index">
						<uni-card :margin="'0px 0px 0px 0px'" @click="goodsDetail(item.id)">
							<image @click.stop="goodsDetail(item.id)" slot='cover'
								style="width: 100%;height: 6.8125rem;margin-top: 10px;border-radius: 10px;"
								:src="item.picture"></image>
							<text class="uni-body">{{item.name}}</text>
							<view class="" style="height: 50px;overflow: hidden;display: flex;">
								<view class=""
									style="flex: 2;justify-content: flex-start;display: flex;flex-direction: column;">
									<view class="" style="color: #EC0D0D;font-size: 24px;padding:3px 0px;">
										￥{{item.price}}
									</view>
									<view class="">已售{{item.sale}}件</view>
								</view>
								<view class="carpush" @click.stop="addCard(item.id)">
									<uni-icons type="cart-filled" color="#EC0D0D" size="36"></uni-icons>
								</view>
							</view>
						</uni-card>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'cf-goods',
		emits: ['click', 'addCard'],
		props: {
			//数据列表
			list: {
				type: Array,
				default: () => []
			},
			//排列方式 
			type: {
				type: Number,
				default: 2
			},
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		//事件监听
		watch: {},
		onLoad() {
			console.log(this.width)
		},
		methods: {
			//banner事件
			goodsDetail(data) {
				this.$emit('click', data);
			},
			addCard(data) {
				this.$emit('addCard', data);
			},

		}
	}
</script>


<style lang="scss">
	.uni-body {
		font-size: 16px;
		color: #101010;
		font-weight: 900;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		padding-bottom: 5px;
	}

	.goodsList {}

	.card-actions-item {
		flex: 2;
		display: flex;
		align-items: center;
	}

	.card-actions-item2 {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		// position: relative;
		// animation: carmove 2s;
		// /* Safari and Chrome */
		// -webkit-animation: carmove 2s;
	}

	.card-actions-item2:active {
		transform: scale(1.2);
	}


	.card-actions-item-text {
		font-size: 28px;
		color: #EC0D0D;
	}

	.card-actions-item-text1 {
		margin-left: 10px;
		font-size: 14px;
		color: #a2a2a2;
	}

	.card-actions-item-text2 {
		font-size: 14px;
	}

	.carpush {
		flex: 1;
		justify-content: center;
		align-items: center;
		display: flex;
	}

	.carpush:active {
		transform: scale(1.2);
	}
</style>
